<template>
  <el-dialog top="10vh" width="700px" title="添加/编辑比价" :visible.sync="dialogValue" :close-on-click-modal="false"
    append-to-body>
    <SubmitForm :rule-form="ruleForm" :rules="rules" :form-list="formList" @change="handleFormChange" @save="onSave"
      @close="dialogValue = false">
      <template slot="month">
        <el-date-picker value-format="yyyy-MM" v-model="ruleForm.month" type="month" placeholder="选择月">
        </el-date-picker>
      </template>
    </SubmitForm>

  </el-dialog>
</template>

<script>
import { http } from '@/api'

export default {
  name: 'MonthlyBiddingAdd',
  data() {
    return {
      apiKey: 'monthlyBidding',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        month: '',
        title: '',
        description: '',
        bidding_start_date: null,
        bidding_end_date: null,
        status: 1
      },
      rules: {
        month: [{ required: true, message: '比价月份不能为空' }],
        title: [{ required: true, message: '比价标题不能为空' }],
        // bidding_start_date: [{required: true, message: '比价开始日期不能为空'}],
        // bidding_end_date: [{required: true, message: '比价结束日期不能为空'}],
      },
      formList: [
        {
          label: '比价月份',
          prop: 'month',
          slot: true,
          colSpan: 12
        },
        {
          label: '比价标题',
          prop: 'title',
          name: 'input',
          placeholder: '请输入比价标题',
          colSpan: 12
        },
        {
          label: '比价描述',
          prop: 'description',
          name: 'textarea',
          placeholder: '请输入比价描述',
          colSpan: 24
        },
        // {
        //   label: '比价开始日期',
        //   prop: 'bidding_start_date',
        //   name: 'datetime',
        //   dateType: 'date',
        //   placeholder: '请选择比价开始日期',
        //   valueFormat: 'yyyy-MM-dd',
        //   colSpan: 12
        // },
        // {
        //   label: '比价结束日期',
        //   prop: 'bidding_end_date',
        //   name: 'datetime',
        //   dateType: 'date',
        //   placeholder: '请选择比价结束日期',
        //   valueFormat: 'yyyy-MM-dd',
        //   colSpan: 12
        // },
        // {
        //   label: '状态',
        //   prop: 'status',
        //   name: 'select',
        //   colSpan: 24,
        //   options: [
        //     {
        //       value: 1,
        //       label: '进行中'
        //     },
        //     {
        //       value: 2,
        //       label: '已结束'
        //     },
        //     {
        //       value: 3,
        //       label: '已确定供应商'
        //     }
        //   ]
        // }
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {
    },
    open(row) {
      this.dialogValue = true
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data,
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    onSave() {
      // 验证结束日期不能早于开始日期
      if (this.ruleForm.bidding_end_date && this.ruleForm.bidding_start_date) {
        if (this.ruleForm.bidding_end_date < this.ruleForm.bidding_start_date) {
          this.$message.error('比价结束日期不能早于开始日期');
          return;
        }
      }

      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, {
        ...this.ruleForm,
      }).then(res => {
        this.$message.success('操作成功');
        this.dialogValue = false;
        this.$emit('get-page');
      });
    }
  }
}
</script>

<style scoped lang="scss"></style>
